<script setup>
import http from '@/http/index.js';
import { api } from '@/api/index.js';
import { ElMessage } from 'element-plus'
import { ref, defineEmits, defineProps } from 'vue';
const props = defineProps(['onlyGetInputFiles', 'uploadApi', 'type', 'label', 'plain', 'round', 'size', 'inputAccept', 'multiple'])
console.log('父亲传过来的值props.type:', props.type);
const emits = defineEmits()
const input = document.createElement('input');
const uploadFile = () => {
  input.type = 'file';
  input.accept = props.inputAccept ? props.inputAccept : '*/*'; //默认选择可以任意文件类型，比如传参'.xls,.xlsx,' 表示允许.xls和.xlsx
  input.multiple = props.multiple ? props.multiple : false; // 是否多文件选择
  input.onchange = (event) => {
    const files = event.target.files; // 获取选择的文件列表
    //如果仅仅要获取输入的文件列表
    if (props.onlyGetInputFiles) {
      emits('getInputFiles', files);
    } else {
      if (files.length > 0) {
        const formData = new FormData();
        // 遍历选择的文件并将它们添加到 FormData
        Array.from(files).forEach(file => {
          formData.append('file', file); // 每个文件都添加到 FormData 中
        });
        http.post(props.uploadApi ? props.uploadApi : api.uploadFile, formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        }).then((res) => {
          emits('UploadResult', res) //将上传结果通过传参给父亲事件的参数里面
          if (res.code === 200) {
            ElMessage({ type: 'success', message: res.msg });
          } else if (res.code === 401) {
            ElMessage({ type: 'error', message: res.msg });
          } else {
            ElMessage({ type: 'error', message: '后端服务出错' });
          }
        }).catch((err) => {
          console.log('err', err);
          ElMessage({ type: 'error', message: '上传失败' });
        });
      } else {
        ElMessage({ type: 'error', message: '未选择文件' });
      }
    }
  };
  input.click();
}
</script>
<template>

  <el-button :plain="props.plain ? props.plain : false" :round="props.round ? props.round : false"
    :type="props.type ? props.type : ''" :size="props.size ? props.size : ''" @click="uploadFile">
    {{ props.label ? props.label : '文件上传' }}
  </el-button>

</template>
<style lang="scss" scoped></style>